<template>
  <view class="address-book-details">
    <NavBar
      v-if="appInfoStore().isH5"
      title="人员选择"
    />
    <view
      class="details-box"
      :class="{ 'padding-top-navbar': appInfoStore().isH5 }"
    >
      <view class="address-book-details-title">
        <nut-searchbar
          v-model="searchValue"
          placeholder="搜索"
        >
          <template v-slot:leftin>
            <i
              class="iconfont icon-sousuo"
              style="font-size: 20px; color: #666"
            ></i>
          </template>
        </nut-searchbar>
      </view>
      <view class="details-content">
        <view class="details-content-item">
          <view class="item-title">
            <text>可选范围：通讯录</text>
            <i class="iconfont icon-youjiantou1"></i>
            <text class="select-title-text">组织</text>
          </view>
          <view class="item-content">
            <!-- <nut-cell class="select-all">
              <nut-checkbox
                v-model="val1"
                :indeterminate="indeterminate"
                @change="change1"
              >
                全选
              </nut-checkbox>
            </nut-cell> -->
            <view class="select-item">
              <nut-checkbox-group
                ref="group"
                v-model="val2"
                @change="change2"
              >
                <nut-cell
                  class="checkbox-item"
                  v-for="(item, index) in 5"
                  :key="index"
                >
                  <nut-checkbox :label="index + 1">
                    <view class="checkbox-item-box">
                      <view class="checkbox-item-box-left">
                        <view class="left-img">
                          <img
                            src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN01b4SLYh1S9wNw53GJw_!!1034622205.png"
                            alt=""
                          />
                          <text>总经办</text>
                        </view>
                      </view>
                      <view class="checkbox-item-box-right">
                        <i class="iconfont icon-youjiantou1"></i>
                      </view>
                    </view>
                  </nut-checkbox>
                </nut-cell>
              </nut-checkbox-group>
            </view>
            <view class="item-content-btn">
              <view class="btn-box">
                <view class="btn-box-left">
                  <text>已选择：1个部门</text>
                  <text>(86人)</text>
                </view>
                <view class="btn-box-right">
                  <nut-button type="primary">确定(1)</nut-button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <nut-popup
      position="bottom"
      round
      :style="{ height: '80%' }"
      v-model:visible="state.isVisible"
    >
      <view class="popup-content">
        <view class="popup-content-box">
          <view class="popup-content-title">
            <view class="popup-cancel">取消</view>
            <view class="popup-title">选择新成员</view>
            <view class="popup-confirm">确认</view>
          </view>
          <view class="popup-content-search">
            <nut-searchbar
              v-model="searchValue"
              placeholder="搜索"
            >
              <template v-slot:leftin>
                <i
                  class="iconfont icon-sousuo"
                  style="font-size: 20px; color: #666"
                ></i>
              </template>
            </nut-searchbar>
          </view>
          <view class="popup-content-list">
            <text class="popup-con-title">选择联系人</text>
            <selectPerson />
          </view>
        </view>
      </view>
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import NavBar from "@/components/navBar/index.vue";
import { appInfoStore } from "@/stores/appInfo";
import addOrganization from "./addOrganization/index.vue";
import addGroupChat from "./addGroupChat/index.vue";
import selectPerson from "@/components/selectPerson/index.vue";
import { useRouter } from "@tarojs/taro";
import { onMounted, reactive, ref } from "vue";
const rouer = useRouter();
const group = ref(null);
const val1 = ref(false);
const val2 = ref([]);
const indeterminate = ref(false);

const change1 = value => {
  group.value.toggleAll(value);
};

const change2 = label => {
  if (label.length === 5) {
    indeterminate.value = false;
    val1.value = true;
  } else if (label.length && label.length < 5) {
    indeterminate.value = true;
  } else {
    indeterminate.value = false;
    val1.value = false;
  }
};
// const props = defineProps(["detailsId"]);
const detailsId = ref<string | undefined>("");
const isAddPopup = ref(false);
const state = reactive({
  isVisible: false,
});
const addOrganizationMap = reactive({
  organizationName: "",
  detailName: "",
  bgColor: "",
  iconImg: "",
});
onMounted(() => {
  detailsId.value = rouer.params.detailsId;
  console.log(detailsId.value, "detailsId.value");
});
const addPopup = () => {
  state.isVisible = !state.isVisible;
};
</script>
<style lang="less">
@import "./index.less";
// @import url("../../../../assets/css/index.css");
@import "@/assets/css/index.less";
</style>
